<template>
    <div id="personal">
        <el-descriptions title="用户信息">
            <el-descriptions-item label="用户名">{{ dataList.userName }}</el-descriptions-item>
            <el-descriptions-item label="手机号">{{ dataList.phone }}</el-descriptions-item>
            <el-descriptions-item label="个人介绍">{{ dataList.introduction }}</el-descriptions-item>
        </el-descriptions>
        <i class="el-icon-refresh diary-refresh" @click="GetUserInfo"></i>
    </div>
</template>

<script>
    export default {
        name: 'personal',
        data() {
            return {
                phone: JSON.parse(localStorage.getItem('HuiLY')).userinfo?.phone,
                dataList: {}
            }
        },
        methods: {
            GetUserInfo() {
                let loading = this.$loading(
                    {
                        target: '#personal',
                        text: '加载中'
                    }
                )
                this.$GET('/user/getUserInfo', { phone: this.phone })
                    .then((res) => {
                        this.dataList = res.data.data[0]
                    }).catch(_ => { }).finally(_ => {
                        setTimeout(() => {
                            loading.close()
                        }, 200)
                    })
            }
        },
        mounted() {
            this.GetUserInfo()
        }
    }
</script>

<style scoped lang="less">
    #personal {
        width: 100%;
        height: 100%;

        .diary-refresh {
            position: fixed;
            top: 15%;
            right: 5%;
            font-size: 50px;
            // color: rgb(20, 40, 150);
            color: var(--mian-font-color);
            background-color: rgb(250, 220, 100);
            border-radius: 50%;
            display: inline-block;

            &:hover {
                transform: scale(1.1);
                transition: all .5s;
            }
        }
    }
</style>